import { Button, Radio, Space, Table } from 'antd';
import { useState, useEffect } from 'react'
import LittleTitle from '../../../../../../common/LittleTitle';
import _ from 'lodash';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import rangeDisplayIcon from '../../../Jcyj/rangeDisplayIcon';


export default function ZzfxfxResult(props) {
    const { result, onUpdateZzfx } = props;
    const map = useBusinessMap();
    //console.log('reul  zzfx',result)
    const [type, setType] = useState('zz');
    const handleClick = (record) => {
        const yhlx = record.yhlx
        // console.log('reul  zzfx',yhlx)
        const zzfxGeom = result?.geom;
        onUpdateZzfx(yhlx, zzfxGeom)
    }

    /* 
    --下面这个钩子函数用于范围内各种'承灾体'、'减灾资源'在地图是显示，与'监测预警'使用同函数，函数在'监测预警'文件夹下，监测点、预警信息、隐患点数据暂无
    --rangeDisplayIcon(data, circle, map, ypType);
    --↓
    */
    useEffect(() => {
        //console.log("9",result,type)
        let data, wkt = result.geom, ypType = type;
        if (data) {
            data = result.data.map(e => ({ name: e.yhlx }));
            rangeDisplayIcon(data, _, map, ypType, wkt);
        }else{
            alert("信息数据为空！")
        }

        return () => {
            const allLayers = map.getLayers().getArray();
            [...allLayers].forEach(l => {
                if (l?.get("layerName") === 'rangeDisplayIcon')
                    map.removeLayer(l);
            })

        }
    }, [result, type, map])
    /* 
    --↑
    */


    return <div style={{
        padding: '0 12px'
    }}>
        <LittleTitle>分析概要</LittleTitle>
        <div style={{ margin: "8px 0 16px 0" }}>
            <div>
                该区域共有致灾<span style={{
                    fontWeight: 'bold',
                    color: '#f50',
                    padding: '0 3px'
                }}>
                    {_.sumBy(result.data, 'count')}
                </span>处
            </div>
        </div>
        <LittleTitle>结果详情</LittleTitle>
        <Space direction='vertical' style={{
            marginTop: 8,
            width: '100%'
        }}>
            <Table bordered size='samll' dataSource={result?.data}
                columns={[
                    {
                        title: '类型',
                        dataIndex: 'yhlx',
                        width: 160,
                        ellipsis: true
                    }, {
                        title: '数量',
                        dataIndex: 'count',
                        align: 'center'
                    },
                    {
                        width: 80,
                        align: 'center',
                        render: (a, record) => {
                            return <Button type="link" size='small' onClick={() => handleClick(record)}>详情</Button>
                        }
                    }]}
                pagination={{
                    pageSize: 10
                }} />
        </Space>

    </div>;
}